<template>
    <div class="depart_wrap flex-row">
        <a-card title="部门列表" style="width: 300px">
            <template #extra><a-button size="middle" type="primary" @click="pickItem(null)">添加部门</a-button></template>
            <a-spin v-if="loading" style="margin-top:30px;" />
            <template v-else>
                <template v-if="config.departData.length">
                    <a-tree :tree-data="config.departData" :defaultSelectedKeys="[config.deptId]"
                        :auto-expand-parent="config.autoExpandParent" :fieldNames="config.replaceFields"
                        :expanded-keys="config.expandedKeys" @expand="onExpand">
                        <template #title="item">
                            <div class="dept_item flex-row">
                                <div class="dept_name" @click="selectedItem(item)">
                                    <a-tooltip>
                                        <template #title>{{ item.name }}</template>
                                        {{ item.name }}
                                    </a-tooltip>
                                </div>
                                <a-button type="link" v-if="item.id != -1" size="small" @click="pickItem(item)">编辑</a-button>
                                <a-button type="link" v-if="item.id != -1" style="color:#ff4d4f!important;" size="small"
                                    @click="removeItem(item, remove, `确定删除${item.name}部门?`, 'id')">删除</a-button>
                            </div>
                        </template>
                    </a-tree>
                </template>
                <a-empty v-else />
            </template>
        </a-card>
        <a-card class="flex-item user_wrapper" title="用户列表">
            <UserList :dept_id="deptId" :showSearch="false" />
        </a-card>

        <template v-if="showInfo">
            <ItemInfo :list="config.departData" :info="showItem" @cancel="close" @submit="search()" />
        </template>

    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import UserList from '@/views/system/user/index.vue'
import { useTable } from '@/hooks/use-table/index'
import { remoteList, remove } from '@/api/system/depart'
import ItemInfo from './components/info.vue'
import { IDepart } from './depart.type'

let config = reactive(<any>{
    departData: [],
    expandedKeys: [-1],
    dataList: [],
    replaceFields: {
        children: 'children',
        title: 'name',
        value: 'id'
    },
    autoExpandParent: true,
    deptId: '',
    itemInfo: {},
    isShowInfo: false
})

let {
    loading,
    showItem,
    showInfo,
    search,
    removeItem,
    pickItem,
    close
} = useTable(remoteList, { page: 0, size: 0 }, (res: any) => {
    let { data } = res
    config.departData = [
        {
            name: '集团公司',
            key: -1,
            id: -1,
            children: [
                ...data
            ]
        }
    ]
});
//点击树展开
const onExpand = (expandedKeys: string[]) => {
    config.expandedKeys = expandedKeys;
    config.autoExpandParent = false;
}
//选择某个部门
let deptId = ref<any>()
const selectedItem = (item:IDepart)=>{
    let {id} = item;
    deptId.value = id;
}
</script>
<style lang="scss" scoped>
.dept_item{
    align-items: center;
    .dept_name{
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
:deep(.ant-tree-treenode){
    .ant-tree-node-content-wrapper{
        width: 100%;
    }
    width: 100%;
    height: 32px;
    line-height: 32px;
}
.depart_wrap {
    margin: 20px;
    .user_wrapper {
        width: 0;
        margin-left: 20px;
        :deep(.page-table-container) {
            margin: 0;
        }
        :deep(.ant-card .ant-card-body) {
            padding: 0;
        }
    }
}
</style>